<template>
	<view class="choice">
		<block v-for="(item,index) in data" :key="index">
			<view class="item" :style="pad" @tap="changeCurrent(index)"
			:class="current_index === index ? 'active' : ''">
				<text class="text">{{item}}</text>
			</view>
		</block>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
	const props = defineProps({
		data: { // 数据
			type: Array,
			default: () => []
		},
		px: { // 左右内边距
			type: Number,
			default: 10
		},
		py: { // 上下内边距
			type: Number,
			default: 10
		}
	})
	
	const current_index = ref(0) // 当前激活的选项
	
	// const emit = defineEmits(['change'])
	
	const pad = computed(() => { // 设置内边距
		return `padding:${props.py}rpx ${props.px}rpx;`
	})
	
	const changeCurrent = (index) => { // 改变当前激活项
		current_index.value = index
		// emit('change',index)
	}
	
	defineExpose({
		current_index
	})
	
</script>

<style lang="less" scoped>
	.choice{
		.item{
			height: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #f1f1f1;
			border: 2rpx solid #eee;
			.text{
				font-size: 30rpx;
			}
		}
		.active {
			background-color: #f7931e;
		}
	}
</style>